<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>YUI Container - ResizePanel: Creating a Resizable Panel (YUI Library)</title>

	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">

	<link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css">
	<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>

<body>

	<div id="doc3" class="yui-t5">
		<div id="hd">
			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
			<h1>YUI Container: ResizePanel: Creating a Resizable Panel</h1>
		</div>

		<div id="bd">

					<div id="toc" class="yui-b">
			<ul>
				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>

<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
<li class="item"><a href="../skin/1.html">Panel: Skinning</a></li>
<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
<li class="item selected"><a href="1.html">ResizePanel: Creating a Resizable Panel</a></li>
<li class="child active"><a href="1.html">Subclassing Panel to Create ResizePanel</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
			</ul>
		</div>
			<div id="yui-main">
				<div class="yui-b">
					<h1 class="first">Subclassing Panel to Create ResizePanel</h1>

								<p>In this tutorial, we will build a subclass for Panel called ResizePanel that will allow the Panel to be resized using a draggable handle in the bottom-right corner of the footer.</p>

			<p>The first step to subclassing the Panel is writing the constructor for the new subclass (ResizePanel, in this case) and specifying its inheritance from the Panel class using <em>YAHOO.extend</em>:</p>

			<textarea name="code" class="JScript" cols="60" rows="1">
				YAHOO.namespace("example.container");

				// BEGIN RESIZEPANEL SUBCLASS //
				YAHOO.widget.ResizePanel = function(el, userConfig) {
					if (arguments.length > 0) {
						YAHOO.widget.ResizePanel.superclass.constructor.call(this, el, userConfig);
					}
				}

				YAHOO.extend(YAHOO.widget.ResizePanel, YAHOO.widget.Panel);
			</textarea>

			<p>Next, we will define a few constants for use by the ResizePanel class: "CSS_PANEL_RESIZE", which defines the CSS class to apply to the Panel, and "CSS_RESIZE_HANDLE", the CSS class to apply to the resize handler.</p>

			<textarea name="code" class="JScript" cols="60" rows="1">

				YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE = "resizepanel";

				YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE = "resizehandle";

			</textarea>

			<p>Next, the initialization method for the ResizePanel is defined. The first step the initialization must perform is to call the superclass's <em>init</em> method so that the superclasses can initialize first. After that, take the following steps:</p>
			<ol>
			  <li>We fire the <em>beforeInitEvent</em> and add the CSS class to the Panel;</li>
			  <li>We create the element that will serve as the resize handle in the footer;</li>
			  <li>We make sure that the footer is set to blank text if no footer is specified by render time, since a footer is required in order for the ResizePanel to function properly.</li>
			  <li>Finally, we subscribe a function to the Panel's <em>renderEvent</em> wherein we'll configure the resize handle's Drag and Drop instance (instance of <a href="http://developer.yahoo.com/yui/docs/dragdrop/YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a>). The resize is achieved by calculating the difference in position between the handle's start point and end point.</li>
</ol>
			<textarea name="code" class="JScript" cols="60" rows="1">
				YAHOO.widget.ResizePanel.prototype.init = function(el, userConfig) {
					YAHOO.widget.ResizePanel.superclass.init.call(this, el);
					this.beforeInitEvent.fire(YAHOO.widget.ResizePanel);

					YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE);

					this.resizeHandle = document.createElement("div");
					this.resizeHandle.id = this.id + "_r";
					this.resizeHandle.className = YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE;

					this.beforeRenderEvent.subscribe(function() {
							if (! this.footer) {
								this.setFooter("");
							}
						},
						this, true
					);

					this.renderEvent.subscribe(function() {
						var me = this;

						me.innerElement.appendChild(me.resizeHandle);

						this.ddResize = new YAHOO.util.DragDrop(this.resizeHandle.id, this.id);
						this.ddResize.setHandleElId(this.resizeHandle.id);

						var headerHeight = me.header.offsetHeight;

						this.ddResize.onMouseDown = function(e) {

							this.startWidth = me.innerElement.offsetWidth;
							this.startHeight = me.innerElement.offsetHeight;

							me.cfg.setProperty("width", this.startWidth + "px");
							me.cfg.setProperty("height", this.startHeight + "px");

							this.startPos = [YAHOO.util.Event.getPageX(e),
											 YAHOO.util.Event.getPageY(e)];

							me.innerElement.style.overflow = "hidden";
							me.body.style.overflow = "auto";
						}

						this.ddResize.onDrag = function(e) {
							var newPos = [YAHOO.util.Event.getPageX(e),
										  YAHOO.util.Event.getPageY(e)];

							var offsetX = newPos[0] - this.startPos[0];
							var offsetY = newPos[1] - this.startPos[1];

							var newWidth = Math.max(this.startWidth + offsetX, 10);
							var newHeight = Math.max(this.startHeight + offsetY, 10);

							me.cfg.setProperty("width", newWidth + "px");
							me.cfg.setProperty("height", newHeight + "px");

							var bodyHeight = (newHeight - 5 - me.footer.offsetHeight - me.header.offsetHeight - 3);
							if (bodyHeight < 0) {
								bodyHeight = 0;
							}

							me.body.style.height =  bodyHeight + "px";

							var innerHeight = me.innerElement.offsetHeight;
							var innerWidth = me.innerElement.offsetWidth;

							if (innerHeight < headerHeight) {
								me.innerElement.style.height = headerHeight + "px";
							}

							if (innerWidth < 20) {
								me.innerElement.style.width = "20px";
							}
						}

					}, this, true);

					if (userConfig) {
						this.cfg.applyConfig(userConfig, true);
					}

					this.initEvent.fire(YAHOO.widget.ResizePanel);
				};
			</textarea>
					<div id="stepnav">
						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
				</div>
			</div>

		</div>

		<div id="ft">&nbsp;</div>
	</div>

	<script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript">
		dp.SyntaxHighlighter.HighlightAll('code');
	</script>

</body>
</html>